<template>
  <div id="app">
    <TopHead :key="$store.state.topHeadKey"/>
    <Nav />
    <router-view/>
    <Footer />
    <transition name="scale">
      <Login v-show="$store.state.isShowLoginBox"></Login>
    </transition>
    <Toast v-show="$store.state.isShowToast"></Toast>
  </div>
</template>
<script>
import TopHead from './components/common/TopHead.vue'
import Nav from './components/common/Nav.vue'
import Footer from './components/common/Footer.vue'
import Login from './components/common/Login.vue'
import Toast from './components/common/Toast.vue'

export default {
  data(){
    return {
      // 如果把toast的信息写在某一个组件里面，修改起来会比较麻烦，放到 vuex 里面
      // msg:'你好'
    }
  },
  components:{
    TopHead,Nav,Footer,Login,Toast
  }
}
</script>


<style lang="less">
.scale-enter,.scale-leave-to {
  transform: scale(0);
  opacity: 0;
}
.scale-enter-active,.scale-leave-active {
  transition: transform .3s,opacity .3s;
  // transition: opacity .3s;
}
.scale-enter-to,.scale-leave {
  transform: scale(1); 
  opacity: 1;
}
</style>
